<template>
	<view class="container">
		<!-- 顶部背景盒子 -->
		<view class="top-bg">
			<!-- 标题盒子 -->
			<view class="system-title">实验室预约管理系统</view>
			<!-- 小导航盒子 -->
			<view class="leader-box">
				<view class="box-content">
					<!-- 每一项 -->
					<view class="con-item" @click="handleMoreTrends">
						<view class="item-content">
							<view class="item-icon">
								<image src="/static/front/zixun.png"></image>
							</view>
							<view class="item-title">动态资讯</view>
							<!--  -->
						</view>

					</view>
					<!--  -->
					<!-- 					<view class="con-item">
						<view class="item-content">
							<view class="item-icon">
								<image src="/static/front/guizhang.png"></image>
							</view>
							<view class="item-title">实验室规章</view>
						</view>

					</view> -->
					<view class="con-item">
						<view class="item-content" @click="handleToLab">
							<view class="item-icon">
								<image src="/static/front/yuyue_l.png"></image>
							</view>
							<view class="item-title">实验室预约</view>
						</view>

					</view>
					<view class="con-item" @click="handleMyRes">
						<view class="item-content">
							<view class="item-icon">
								<image src="/static/front/me_yuyue.png"></image>
							</view>
							<view class="item-title">我的预约</view>
						</view>

					</view>
					<view class="con-item" @click="handleCollect">
						<view class="item-content">
							<view class="item-icon">
								<image src="/static/front/shoucang1.png"></image>
							</view>
							<view class="item-title">收藏列表</view>
						</view>

					</view>
					<view class="con-item" @click="handleToMe">
						<view class="item-content">
							<view class="item-icon">
								<image src="/static/front/me_l.png"></image>
							</view>
							<view class="item-title">我的</view>
						</view>

					</view>
					<view class="con-item" @click="handleAboutAuthor">
						<view class="item-content">
							<view class="item-icon">
								<image src="/static/front/guanyu1.png"></image>
							</view>
							<view class="item-title">关于作者</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<!-- 下部公告资讯盒子 -->
		<!-- <view class="bottom-info">公告资讯</view> -->
		<!-- 头部标题 -->
		<view class="news_tip">
			<view class="tip_title">
				<view class="left_icon">
					<u-icon name="list-dot" color="#5064eb" size="24"></u-icon>
				</view>
				实验室动态资讯
			</view>
			<view class="tip_more" @click="handleMoreTrends">
				更多
				<u-icon name="arrow-right-double" color="#888888" size="16"></u-icon>
			</view>

		</view>
		<!-- 实验室动态咨询 -->
		<view class="news">
			<view class="news-item" v-for="item in nesList" :key="item.trendsId"
				@click="handleTrendsDetail(item.trendsId)">


				<!--  标题 -->
				<view class="item-title">{{item.title}}</view>
				<!-- 中心 -->
				<view class="item-center">
					<view class="center-content">{{item.content}}</view>
					<view class="center-img">
						<image :src="item.coverPhoto" mode="" class="img"></image>
					</view>
				</view>
				<!-- 底部信息 -->
				<view class="item-info">
					<!--阅览量 -->
					<view class="reads">阅览量：{{item.reads_count}}</view>
					<!-- 发布时间 -->
					<view class="send_time">
						发布时间：{{getdateNoTime(item.createTime)}}
					</view>
				</view>


			</view>


		</view>
	</view>
</template>

<script>
	import {
		getTrendsList
	} from '../../api/trends.js'

	export default {
		data() {
			return {
				show: false,
				value1: "14:00",
				nesList: []
			}
		},
		onLoad() {

		},
		onReady() {

		},
		onHide() {

		},
		methods: {
			// 跳转到关于作者
			handleAboutAuthor() {
				uni.navigateTo({
					url: "/pages/about_author/about_author"
				})
			},
			// 跳转到动态咨询详情
			handleTrendsDetail(id) {
				uni.navigateTo({
					url: `/pages/trends_detail/trends_detail?id=${id}`
				})
			},
			handleToMe() {
				uni.switchTab({
					url: '/pages/me/me'
				})
			},
			handleCollect() {
				uni.navigateTo({
					url: "/subpages/my_collect/my_collect"
				})
			},
			handleMyRes() {
				uni.navigateTo({
					url: "/subpages/my_res/my_res"
				})
			},
			handleToLab() {
				uni.switchTab({
					url: "/pages/appointment/appointment"
				})
			},
			handleMoreTrends() {
				uni.navigateTo({
					url: "/pages/trends/trends"
				})
			},
			handleGetTrendsList() {

				getTrendsList().then(res => {
					let arr = res.data.list
					let arr1 = arr.slice(-10)
					arr1.reverse()
					this.nesList = [...arr1]
					// console.log(this.nesList);
				})
			},
			getdateNoTime(date) {
				var now = new Date(parseInt(date)),
					y = now.getFullYear(),
					m = now.getMonth() + 1,
					d = now.getDate();
				let h = now.getHours()
				let min = now.getMinutes()
				let s = now.getSeconds()
				return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + " " + (h < 10 ? '0' + h : h) +
					":" + (min < 10 ? '0' + min : min) + ":" + (s < 10 ? '0' + s : s)
			}

		},
		created() {
			this.handleGetTrendsList()
		},
		onShow() {
			this.handleGetTrendsList()
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;

		.top-bg {
			position: relative;
			width: 100%;
			height: 180upx;
			background-color: #5064eb;

			.system-title {
				width: 100%;
				position: absolute;
				top: 0upx;
				left: 50%;
				transform: translateX(-50%);
				color: #fff;
				font-weight: 700;
				text-align: center;
				font-size: 50upx;
				z-index: 9;
				letter-spacing: 10upx;
			}

			.leader-box {
				position: absolute;
				bottom: -210upx;
				left: 0;
				box-sizing: border-box;
				width: 100%;
				height: 280upx;
				padding: 0 30upx;

				.box-content {
					width: 100%;
					height: 100%;
					background-color: #fff;
					border-radius: 30upx;
					box-shadow: 5upx 5upx 9upx rgba(0, 0, 0, .2);
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					flex-wrap: wrap;

					.con-item {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 160upx;
						height: 140upx;
						// background-color: pink;
						margin-right: 13upx;
						font-size: 25upx;
						text-align: center;
						color: #888888;

						.item-icon {
							width: 100%;

							image {
								width: 50upx;
								height: 50upx;
							}
						}

						.item-title {
							width: 100%;
						}

					}
				}
			}

		}

		.news_tip {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 0upx 20upx;
			font-size: 16px;
			font-weight: 700;
			color: #5064eb;
			margin-top: 220upx;
			box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.05);
			height: 85upx;

			.left_icon {
				display: inline-block;
				height: 100%;
				width: 50upx;
				margin-right: 10upx;
				// background-color: pink;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}

			.tip_title {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}

			.tip_more {
				font-weight: 400;
				color: #888888;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}
		}

		.news {
			box-sizing: border-box;
			padding: 28upx;
			padding-top: 0;
			width: 100%;
			height: 55vh;
			overflow-y: scroll;
			box-sizing: border-box;
			// background-color: pink;

			// margin-top: 320upx;
			.news-item {
				position: relative;

				&:last-child {
					border-bottom: none;
				}

				.type_tag {
					position: absolute;
					top: 20upx;
					right: 5upx;
					font-size: 28upx;
					color: #ccc;
					width: 75upx;
				}

				box-sizing: border-box;
				padding: 20upx;
				width: 100%;
				height: 275upx;
				background-color: #fff;
				// border-bottom: 1px solid #afafaf;
				// background-color: pink;
				box-shadow: 1px 0px 5px rgba(0, 0, 0, 0.15);
				border-radius: 15upx;
				margin-top: 30upx;

				.item-title {
					font-size: 16px;
					font-weight: 700;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

				}

				.item-center {
					width: 100%;
					height: 150upx;
					background-color: #fff;
					margin-top: 10upx;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					font-size: 32upx;

					.center-content {
						box-sizing: border-box;
						flex: 1;
						height: 129upx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						/*! autoprefixer: off */
						-webkit-box-orient: vertical;

					}

					.center-img {
						width: 180upx;
						height: 120upx;
						// background-color: pink;
						border-radius: 15upx;
						margin-left: 5upx;

						.img {
							width: 100%;
							height: 100%;
							border-radius: 15upx;
						}
					}
				}

				.item-info {
					width: 100%;
					color: #afafaf;
					font-size: 12px;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;

					.reads {
						margin-right: 20upx;
					}
				}
			}
		}
	}
</style>item